<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta
			http-equiv="origin-trial"
			content="Atzk/dTch1Tt8qYq/UwLn6aWawymlc3xOKy3xiuwsaj1HBK6eCTBb+EGOnv7LK+oSQ8Fr1l/qykGHhK64mAn+w4AAABjeyJvcmlnaW4iOiJodHRwczovL2hwdWdpcy5naXRodWIuaW86NDQzIiwiZmVhdHVyZSI6IldlYkdQVSIsImV4cGlyeSI6MTY5MTcxMTk5OSwiaXNTdWJkb21haW4iOnRydWV9"
		/>
		<title>directionalLightShadow</title>
		<!-- <link rel="stylesheet" href="./index.scss" /> -->
		<style>
			* {
				box-sizing: border-box;
			}

			html {
				background: #692a84;
				background: linear-gradient(316deg, #0e0f2a, #060913);
				height: 100%;
				width: 100%;
			}

			body {
				font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
				overflow: hidden;
				height: 100%;
				width: 100%;
				margin: 0;
				padding: 0;
			}

			#app {
				height: 100%;
				width: 100%;
			}
		</style>
		<!-- <script type="module" src="../dist/index.js"></script> -->
	</head>

	<body>
		<div id="app"></div>
		<script type="module">
			import {
				BoxGeometry,
				Mesh,
				PerspectiveCamera,
				OrthographicCamera,
				Scene,
				BlinnPhongMaterial,
				Vector3,
				Color,
				SpotLight,
				DirectionalLight,
				Texture,
				Sampler,
				TorusKnotGeometry,
				SkyBox,
				CubeTextureLoader,
				SphereGeometry,
				PbrMaterial,
				loadTexture,
				OrbitControl,
				PlaneGeometry,
				AmbientLight,
				ShadowMapDebugger,
				InstanceMesh,
				Instance
			} from "../../dist/index.js";

			const init = async () => {
				const scene = new Scene({
					container: "app"
				});

				const camera = new PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.01, 3700);
				// camera.position.set(270, 60, -20);
				camera.position.set(506.1763606393651, 262.5312823328739, 457.8459796100227);
				camera.lookAt(60.646427318478175, 1.9235419425270403e-17, 40.087261853717806);
				scene.setCamera(camera);
				const control = new OrbitControl(camera, document.getElementById("app"));
				control.zoomSpeed = 2.0;
				control.maxPolarAngle = Math.PI / 2;

				const ambientLight = new AmbientLight(new Vector3(0.25, 0.25, 0.25), 0.1);

				const environmentUrls = [
					`../textures/environment/px.jpg`,
					`../textures/environment/nx.jpg`,
					`../textures/environment/py.jpg`,
					`../textures/environment/ny.jpg`,
					`../textures/environment/pz.jpg`,
					`../textures/environment/nz.jpg`
				];
				const skybox = new SkyBox(environmentUrls);

				const directionalLight = new DirectionalLight(new Vector3(1.0, 1.0, 1.0), 1.0, true, {
					openCSM: true
				});
				directionalLight.position.set(30, 40, 38);

				const groundSize = 1000;
				// directionalLight.shadow.camera.left = -groundSize;
				// directionalLight.shadow.camera.right = groundSize;
				// directionalLight.shadow.camera.top = groundSize;
				// directionalLight.shadow.camera.bottom = -groundSize;
				// directionalLight.shadow.camera.far = groundSize * 2.0 + 0.1;

				const groundGeometry = new PlaneGeometry(groundSize, groundSize);
				const groundMaterial = new BlinnPhongMaterial(Color.fromCssColorString("#111111"), 150);
				groundMaterial.color = new Color(0.78, 0.85, 0.86);
				const ground = new Mesh(groundGeometry, groundMaterial);
				ground.rotateX(Math.PI / 2);

				// instance shadow Unfinished
				// function addInstanceToScene(groundSize, totalNum, baseMesh) {
				// 	for (let i = 0; i < totalNum; i++) {
				// 		const instance = new Instance();
				// 		const x = (Math.random() - 0.5) * groundSize;
				// 		const y = Math.random() * groundSize * 0.25 + 5;
				// 		const z = (Math.random() - 0.5) * groundSize;
				// 		instance.position.set(x, y, z);
				// 		instance.rotateX(Math.random());
				// 		baseMesh.addInstance(instance);
				// 	}
				// 	scene.add(baseMesh);
				// }
				// const instanceMeshOfTorusKnot = new InstanceMesh(torusKnotGeometry, torusKnotMaterial);
				// addInstanceToScene(groundSize, 10, instanceMeshOfTorusKnot);

				function addInstanceToScene(totalNum, baseMesh, groundSize) {
					for (let i = 0; i < totalNum; i++) {
						let geo;
						const type = Math.floor(Math.random() * 3);
						if (type == 0) {
							geo = new TorusKnotGeometry(10, 3, 200, 32);
						} else if (type == 1) {
							geo = new BoxGeometry(15, 15, 15);
						} else if (type == 2) {
							geo = new SphereGeometry(10);
						}

						const torusKnotMaterial = new BlinnPhongMaterial(Color.fromCssColorString("#ffffff"), 150);
						torusKnotMaterial.color = new Color(1.0, 0.0, 0.0);

						const instance = new Mesh(geo, torusKnotMaterial);
						const x = (Math.random() - 0.5) * groundSize;
						const y = Math.random() * groundSize * 0.25 + 15;
						const z = (Math.random() - 0.5) * groundSize;

						instance.position.set(x, y, z);
						instance.rotateX(Math.random());
						scene.add(instance);
					}
				}
				addInstanceToScene(200, scene, groundSize);
				scene.add(ground);
				scene.add(skybox);
				scene.add(ambientLight);
				scene.add(directionalLight);
				// const shadowMapDebuggerInstance = new ShadowMapDebugger(directionalLight, scene);
				// shadowMapDebuggerInstance.setSize(1024, 256);
				var radiu = 20;
				var i = 0;
				function animate() {
					i++;
					var rad = (i * Math.PI) / 180;
					var x = Math.sin(rad) * radiu;
					var z = Math.cos(rad) * radiu;
					directionalLight.position = new Vector3(x, 40, z);

					requestAnimationFrame(animate);
					control.update();
					scene.render();
				}
				animate();
			};

			init();
		</script>
	</body>
</html>
